<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/user.css">
    <link rel="stylesheet" href="../static/css/client.css">
    <title>容智车联车厢管家</title>
</head>
<body>
<div class="container-fluid">
    <!--右边内容区-->
    <div class="row-fluid bg-white  pad-10 bdbox pos-re">
        <div class="p-b-10 ov-h">
            <form class="navbar-search pull-left">
                <input type="text" class="search-query" placeholder="输入搜索信息"/>
                <button class="search-lence"></button>
            </form>
            <div class="pull-right offset4" >
                <button class="btn bg-color" name="addClient" id="add_info">增加</button>
            </div>
        </div>
        <!--以上是搜索框，增加按钮组-->
        <!--以下是内容表格区-->
        <table class="table cl-b">
            <thead class="four-border">
            <tr>
                <th>ID</th>
                <th>账号</th>
                <th>密码</th>
                <th>所属客户</th>
                <th>角色</th>
                <th>姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>备注</th>
                <th style="text-align: right;padding-right: 40px;">操作</th>
            </tr>
            </thead>
            <tbody class="m-t-10 t-c" id="f-table">
            <#list userList as user>
            <tr class="${user.id}">
                <td class="t-c port-num">${user.id!""}</td>
                <td class="port-card">${user.name!""}</td>
                <td class="port-code">${user.password!""}</td>
                <td class="port-owner"><span class="txt-limit">${user.clientName!""}</span></td>
                <#if (user.type==1)>
                    <td class="port-role">超级管理员</td>
                </#if>
                <#if (user.type==2)>
                    <td class="port-role">客户管理员</td>
                </#if>
                <#if (user.type==3)>
                    <td class="port-role">用户</td>
                </#if>

                <td class="port-name">${user.name!""}</td>
                <td class="port-tel">${user.tel!""}</td>
                <td class="port-email"><span class="txt-limit">${user.email!""}</span></td>
                <td class="port-node">${user.remake!""}</td>
                <td style="text-align: right;">
                    <button class="btn bg-color rewrite update_info" name="addClient">修改</button>
                    <button class="btn bg-color2" data-toggle="modal" data-target="#myModal">删除</button>
                </td>
            </tr>
            </#list>
            </tbody>
        </table>
        <!--以下是信息修改/新建信息弹出页面-->
        <div class="pos-ab wh-bfb pad-30 bdbox dis-no" id="pop_info">
            <div class="container w-lim pad-10 ov-h bdbox">
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 offset1 text-right">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</div>
                    <div class="span2">
                        <input type="text"  placeholder="点击再次输入" class="card-input"/>			                        </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="code-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">授权场站:</div>
                    <div class="span2  pos-re">
                        <input type="text" placeholder="点击再次输入" class="owner-input"/>
                        <span class="pos-ab stationChoose" id="recheck-btn">修改/查看</span>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">角&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色:</div>
                    <div class="span2 pos-re">
                        <input type="text" placeholder="客户管理员" class="role-input" value="客户管理员" readonly/>
                        <#--<button class="btn btn-info pos-ab auth-btn dis-no" id="auth-btn">
                            查看权限
                        </button>-->
                        <ul class="power-pop pos-ab dis-no pad-10 four-border">
                            <li class="text-center p-b-10">客户管理</li>
                            <li class="text-center p-b-10">用户管理</li>
                            <li class="text-center p-b-10">场站管理</li>
                            <li class="text-center p-b-10">车辆管理</li>
                            <li class="text-center p-b-10">设备管理</li>
                        </ul>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
                    <div class="span2 ">
                        <input type="text" placeholder="点击再次输入" class="name-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="tel-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="email-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="node-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 offset1 text-right">选择公司:</div>
                    <div class="span2  pos-re">
                        <input type="text" placeholder="点击再次输入" class="owner-input"/>
                        <span class="pos-ab companyChoose" id="recheck-btn">修改/查看</span>
                    </div>
                </div>
                <input type="hidden" value="2" id="userType" class="type-input"/>
            </div>
            <!--以下按钮组用于修改信息用-->
            <div class="row-fluid p-t-30 dis-no p-l-48" id="txt_add">
                <button class="btn span2 bg-color offset3">确定</button>
                <button class="btn span2 bg-color2 offset1">返回</button>
            </div>
            <!--以下按钮组用于新建信息用-->
            <div class="row-fluid p-t-30 dis-no p-l-48" id="new_add">
                <button class="btn span2 bg-color offset3" id="addCommonUser">确定</button>
                <button class="btn span2 bg-color2 offset1">返回</button>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 点击删除按钮时弹出的模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:350px;margin-left:-175px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    提示消息
                </p>
            </div>
            <div class="modal-body text-center">
                是否确认删除?
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn bg-color span2" data-dismiss="modal" >取消
                </button>
                <button type="button" class="btn bg-color2 span2">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>
<!-------查看/修改的模态窗--------->
<div id="pop-bottom">
</div>

<!--以下是新建信息弹出页面-->
<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no sChoose" id="new-count">
    <h3 class="text-center tit-top p-r-10 pos-re">添加授权场站</br>
        <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <div class="pos-re" >
            <form class="navbar-search  m-l-62">
                <input type="text" class="search-query" placeholder="输入关键字"/>
                <span class="search-lence2"></span>
            </form>
        </div>
    </h3>
    <div class="row-fluid pad-10 bdbox">
        <ol class="span6 p-l-10 p-r-10 bdbox text-center" id="left-list">
            <dt class="p-b-10">已选（0项）</dt>
            <dd class="p-b-10"><input type="checkbox" checked/> 天津五河场站</dd>
            <!--<dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd> -->
        </ol>
        <ol class="span6  p-l-10 p-r-10 bdbox text-center" id="right-list">
            <dt class="p-b-10">待选（44项）</dt>
            <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
            <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
            <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
            <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
            <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
        </ol>
    </div>
    <div class="row-fluid p-t-10 p-l-48 p-l-20" id="new_add">
        <button class="btn span8 bg-color offset1">确认添加</button>
    </div>
</div>

<!--所属公司-->
<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no cChoose" id="new-count">
    <h3 class="text-center tit-top p-r-10 pos-re">选择所属公司</br>
        <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <div class="pos-re" >
            <form class="navbar-search  m-l-62">
                <input type="text" class="search-query" placeholder="输入关键字"/>
                <span class="search-lence2"></span>
            </form>
        </div>
    </h3>
    <div class="row-fluid pad-10 bdbox">
        <ol class="span6 p-l-10 p-r-10 bdbox text-center" id="left-list">
            <dt class="p-b-10">已选（0项）</dt>
            <dd class="p-b-10"><input type="checkbox" checked/> 天津五河场站</dd>
            <!--<dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
          <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd> -->
        </ol>
        <ol class="span6  p-l-10 p-r-10 bdbox text-center" id="right-list">
            <dt class="p-b-10">待选（44项）</dt>
            <#list clientList as client>
                <dd class="p-b-10"><input type="checkbox"/>${client.name!""}</dd>
            </#list>

        </ol>
    </div>
    <div class="row-fluid p-t-10 p-l-48 p-l-20" id="new_add">
        <button class="btn span8 bg-color offset1">确认添加</button>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/user.js"></script>
<script src="../static/js/user/userClient.js"></script>
<script>
    $(function () {

        //弹出选择场站
        $('.stationChoose').click(function(){
            $('#pop-bottom').css('display','block');//弹出新建信息页面
            $('.sChoose').find('input').val('');//初始化新建信息页面
            $('.sChoose').css('display','block');//显示新建信息页面的按钮组
        });


        //弹出选择公司
        $('.companyChoose').click(function(){
            $('#pop-bottom').css('display','block');//弹出新建信息页面
            $('.cChoose').find('input').val('');//初始化新建信息页面
            $('.cChoose').css('display','block');//显示新建信息页面的按钮组
        });

    })
</script>

</body>
</html>
